<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
    import BScroll from 'better-scroll';

    export default {
        name: "Scroll",
        data() {
            return {
                scroll: null,
            }
        },
        props: {
            probeType: {
                type: Number,
                default: 0
            },
            pullUpLoad: {
                type: Boolean,
                default: false
            }
        },
        mounted() {
            // 创建better-scroll对象
            this.scroll = new BScroll(this.$refs.wrapper, {
                click: true,
                // probeType: 是否监听滚动，3为监听滚动；监听滚动会对性能有一定的影响；所以这里由外部决定是否要监听滚动
                probeType: this.probeType,
                // pullUpLoad: 是否监听上拉
                pullUpLoad: this.pullUpLoad,
            });
            // 监听better-scroll滚动的位置
            if (this.probeType === 2 || this.probeType === 3) {
                this.scroll.on('scroll', (position) => {
                    // console.log(position);
                    this.$emit('scroll', position)
                });
            }
            // 监听scroll滚动到底部
            if (this.pullUpLoad) {
                this.scroll.on('pullingUp', () => {
                    this.$emit('pullingUp')
                });
            }
        },
        methods: {
            // 点击滚动到顶部
            scrollTo(x, y, time = 500) {
                this.scroll && this.scroll.scrollTo(x, y, time)
            },
            finishPullUp() {
                this.scroll && this.scroll.finishPullUp()
            },
            refresh() {
                // console.log('验证防抖函数的效果');
                this.scroll && this.scroll.refresh()
            },
            getScrollY() {
                return this.scroll ? this.scroll.y : 0
            }
        }
    }
</script>

<style scoped>

</style>
